<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="no-cache">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta name="format-detection" content="telephone=no">
  <title>webBasic-vue</title>
</head>
<body>
test
<script>
let str=`
vue性能优化  
  vue应用运行时性能优化措施
    引入生产环境vue文件
    使用单文件组件预编译模版
    提取组件的css到单独文件
    利用Object.freeze()提升性能
    扁平化store数据结构
    合理使用持久化Store数据
    组件懒加载
  vue应用加载性能优化措施
    服务端渲染/预渲染
    减少http请求，合理设置http缓存
    使用浏览器缓存
    启用压缩
    css sprites
    图片懒加载
vue实例生命周期
  beforeCreate 初始化实例后，数据观测和事件配置之前调用
  created 实例创建完成
  beforeMount 挂载前
  mounted 挂载完成
  beforeUpdate 数据更新时
  updated 数据更新完成
  beforeDestory 实例销毁前
  destoryed 实例销毁
vue双向数据绑定原理
  利用Object.defineProperty()方法，重新定义了对象获取属性值get和设置属性值set操作实现的
vue3.0 为什么要用原生Proxy替换Object.defineProperty
  Object.defineProperty无法监控到数组下标的变化，导致直接通过数组下标给数组设置值，不能实时响应
为什么避免v-if和v-for用在一起
  v-for比v-if具有更高的优先级，v-if将分别重复运行于每个v-for循环中
组件的设计原则
  页面的每个独立的可视区域视为一个组件，如页面头部，尾部，可复用的区块
  每个组件对应一个工程目录，组件所需要资源在这个目录下就近维护
  页面不过是组件的容器，组件可以嵌套自由组合成完整的页面
vue的两个核心
  数据驱动和组件化
v-show和v-if区别
  v-show切换css display属性显示隐藏 v-if是直接销毁和重建dom
vue常用的修饰符
  事件修饰符 @click.stop="doThis"
    .stop 阻止点击事件冒泡
    .prevent 取消默认事件
    .capture 与事件冒泡的方向相反，事件捕获由外到内捕获事件
    .self 只处罚自己范围内事件，不包含子元素
    .once 只执行一次
    .passive 对应addEventListener，可提升移动端性能
  键盘修饰符
    .enter
    .tab
    .delete
    .esc
    .space
    .down
    .up
    .left
    .right
$nextTick的使用
  this.$nextTick(function(){})
  vue生命周期的created()钩子函数进行的dom操作，一定要放在$nextTick回调函数中
  动态生成的dom中使用
子组件调用父组件的方法
  this.$parent.event
  子组件$emit向父组件触发一个事件，父组件监听该事件
  父组件把方法传入到子组件，子组件直接调用
父组件调用子组件的方法
  $refs 
keep-alive的作用
  保留组件状态，避免重新渲染，实际项目中需配合vue-router共同使用
  <keep-alive include="a"></keep-alive>  name为a组件将被缓存
  <keep-alive exclude="a"></keep-alive>  name为a组件不被缓存
  配合vue-roter <keep-alive><router-view></router-view></keep-alive>增加router.meta属性，如：
  {
    path:'/',
    name:'home',
    component:Home,
    meta:{keepAlive:true} //需要被缓存 flase则不需要被缓存
  }
编写可服用组件，要总结组件的职能，需要props传什么值，组件是否需要向父组件$emit。是否需要slot
vue更新数组时触发视图更新的方法
  vue.set可以设置对象或数组的值，通过Key或数组索引，可以触发视图更新
    Vue.set(target,key,value)  
    Vue.set(array,indexOfItem,newValue) 
    this.array.$set(indexOfItem,newValue)
  vue.delete删除对象或数组中元素，通过key或数组索引，可以触发视图更新
    Vue.delete(array,indexOfItem)  
    this.array.$delete(indexOfItem)
  数组对象直接修改属性，可以触发视图更新
    this.array[0].show=true
    this.array.forEach(function(item){item.show=true})
解决网速慢，vue非工程化页面闪动？
  v-cloak
v-for列表怎么写tab菜单
  <div v-for="(item,index) of navs" :key="index" :class="index==currentIndex?'active':''">
vue怎么实现页面的权限控制
  利用vue-router的beforeEach事件，可以在跳转页面前判断用户的权限，是否能进入该页面，如果不能则提示错误或重定向
$route和$router的区别
  $route是路由信息对象，包括path,params,hash,query,fullPath,matched,name等路由信息参数
  $router是路由实例对象，包括路由的跳转方法，钩子函数等
watch的作用是什么
  watch主要监听某个数据值的变化，和计算属性相比，watch没有缓存
computed计算属性的缓存和方法调用的区别
  计算属性基于数据的依赖缓存，数据发生变化，缓存才变化。如果数据没有变化，调用计算属性直接调用的是存储的缓存值
  方法则每次都会重新计算。如果大量计算，性能开销比较大，可以选用计算属性
vue双向绑定的原理
  vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新
响应时系统的基本原理
  对象传入vue实例作为data对象时，首先被vue遍历所有属性，调用Object.defineProperty设置为getter和setter，每个组件都有一个watcher对象，在组件渲染过程中，把相关的数据都注册成依赖，当数据发生setter变化时，会通知watcher，更新相关联组件
vuex工作原理详解
  vuex中的store本质就是没有template的隐藏着的vue组件
  原理：vuex生成了一个store实例，并把这个实例挂在所有的组件上，所有的组件引用的都是同一个store实例。store实例上有数据，有方法，方法改变的都是store实例上的数据。由于其他组件引用的是同样的实例，所以一个组件改变了store上的数据，其他组件的数据也会改变，就像一个对象的引用
vuex五种属性、
  State
    state是数据源存放地，对应一般Vue对象中的data
    存放的数据是响应式的，vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件，也会发生更新
    通过mapState把全局的state和getters映射到当前组件的computed计算属性中
  Getter
    对State进行计算操作，相当于Store的计算属性
    组件内可做计算属性，也可在多组件之间复用
    如果一个状态只在一个组件内使用，可以不用getters
  Mutation
  Action
    Action类似于Mutation，不同在于action提交的是mutation，而不是直接变更状态；action可以包含任意异步操作
  Module
vue-router响应路由参数变化
  当使用路由参数时,例如从user/foo导航到user/bar，原来的组件实例会被复用，组件的生命周期钩子不会再被调用
  对路由参数变化作出响应，可以watch $route对象
    const user={
      template:'...',
      watch:{
        '$route'(to,from){
          //对路由变化作出响应
        }
      }
    }
  使用beforeRouteUpdate
    const user={
      template:'...',
      beforeRouteUpdate(to,from,next){
        //react to route changes
        //don，t forget to call next()
      }
    }
什么是mvvm?
  mvvm是model-view-viewModel缩写，mvvm是一种设计思想。model层代表数据模型，view代表UI组件，viewmodel是一个同步view和model的对象（桥梁）
  mvvm架构下，view和model之间并没有直接的联系，通过viewmodel进行交互，model和viewmodel之间的交互是双向的。view数据变化会同步到model中，model数据的变化也会立即反应到view上










`

</script>
</body>
</html>
